<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    <!-- 头像 -->
    <input
      type="file"
      hidden
      ref="input"
      accept=".png,.jpg"
      @change="onSelected"
    />
    <van-cell is-link title="头像" @click="$refs.input.click()">
      <van-image round width="0.8rem" height="0.8rem" :src="userInfo.photo" />
    </van-cell>
    <!-- 昵称 -->
    <van-cell is-link title="昵称" @click="isShowNcname = true">
      <span>{{ userInfo.name }}</span>
    </van-cell>
    <!-- 性别 -->
    <van-cell is-link title="性别" @click="isShowGender = true">
      <span>{{ userInfo.gender === 0 ? '男' : '女' }}</span>
    </van-cell>
    <!-- 生日 -->
    <van-cell is-link title="生日" @click="isShowBirthday = true">
      <span>{{ userInfo.birthday }}</span>
    </van-cell>
    <!-- 弹层 -->
    <div>
      <!-- 更新昵称的弹层 -->
      <van-popup
        v-model="isShowNcname"
        position="bottom"
        :style="{ height: '100%' }"
      >
        <update-nickname
          @close="isShowNcname = false"
          v-if="userInfo.name && isShowNcname"
          :name.sync="userInfo.name"
        ></update-nickname>
      </van-popup>
      <!-- 更新性别的弹层 -->
      <van-popup
        v-model="isShowGender"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <update-gender
          v-if="userInfo.name && isShowGender"
          :gender.sync="userInfo.gender"
          @close="isShowGender = false"
        ></update-gender>
      </van-popup>
      <!-- 更新生日的弹层 -->
      <van-popup
        v-model="isShowBirthday"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <!-- v-if：防止数据请求慢的时候报错 -->
        <update-birthday
          v-if="userInfo.birthday"
          :birthday.sync="userInfo.birthday"
          @close="isShowBirthday = false"
        ></update-birthday>
      </van-popup>
      <!-- 更新头像的弹层 -->
      <van-popup
        v-model="isShowAvatar"
        position="bottom"
        :style="{ height: '100%' }"
      >
        <update-avatar
          :photo="photo"
          @update-photo=";[(userInfo.photo = $event), (isShowAvatar = false)]"
          @close="isShowAvatar = false"
          v-if="isShowAvatar"
        ></update-avatar>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getUserProfileAPI } from '@/api'
import UpdateNickname from './components/UpdateNickname.vue'
import UpdateGender from './components/UpdateGender.vue'
import UpdateBirthday from './components/UpdateBirthday.vue'
import UpdateAvatar from '@/views/User/components/UpdateAvatar'
import { ResolvetoBase64 } from '@/utils'
export default {
  components: {
    UpdateNickname,
    UpdateGender,
    UpdateBirthday,
    UpdateAvatar
  },
  data() {
    return {
      userInfo: {},
      isShowNcname: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvatar: false,
      photo: ''
    }
  },
  created() {
    this.getUserProfile()
  },
  methods: {
    async getUserProfile() {
      const { data } = await getUserProfileAPI()
      this.userInfo = data.data
      // console.log({ data })
      // console.log(this.userInfo)
    },
    async onSelected() {
      // 1、获取用户选择的文件（保存在input.file)
      const file = this.$refs.input.files[0]
      console.log(file)
      // 2、将file对象转换成base64
      const base64 = await ResolvetoBase64(file)
      this.photo = base64
      // 3、打开弹出层
      this.isShowAvatar = true
      // 4、手动将input.value清空,不然由于input框绑定的是change事件，如果选中同样的照片两次就会不显示弹层
      this.$refs.input.value = ''
    }
  }
}
</script>

<style></style>
